<template>
    <div class="container">
        <div style="padding-top: 20px;">
            <el-breadcrumb separator="/" class="breadcrumb">
                <el-breadcrumb-item>
                    <router-link to="/user/location">党建地点</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- Outer Card wrapping the content -->
        <el-card class="main-card">
            <div class="content">
                <div class="location-detail">
                    <!-- Location image -->
                    <el-card class="image-card">
                        <img
                            v-if="locationDetails.photo"
                            :src="locationDetails.photo"
                            alt="Location Image"
                            class="location-image"
                        />
                    </el-card>

                    <div class="location-info">
                        <h2>{{ locationDetails.name }}</h2>
                        <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
                        <p><strong>类型:</strong> {{ locationDetails.type }}</p>
                    </div>

                    <div class="location-description">
                        <h3>详细信息</h3>
                        <p>{{ locationDetails.content }}</p>
                    </div>
                </div>

                <!-- 推荐位置 -->
                <div class="recommendations">
                    <h3>系统推荐</h3>
                    <el-row :gutter="20" class="recommendation-list">
                        <el-col
                            v-for="location in recommendedLocations"
                            :key="location.id"
                            :span="24"
                            class="recommendation-item"
                        >
                            <el-card class="recommended-card">
                                <img
                                    :src="location.photo"
                                    alt="推荐地点"
                                    class="recommendation-image"
                                />
                                <div class="recommendation-name">{{ location.name }}</div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { selectByNameService, LocationListService } from '@/api/location.js';

export default {
    data() {
        return {
            locationId: this.$route.params.locationId,
            locationName: this.$route.params.locationName,
            locationDetails: {},
            allLocations: [],
            recommendedLocations: [],
        };
    },
    created() {
        this.fetchLocationDetails();
        this.fetchAllLocations();
    },
    methods: {
        async fetchLocationDetails() {
            try {
                const response = await selectByNameService(this.locationName);
                this.locationDetails = response.data[0] || {};
                console.log('Location Details:', this.locationDetails);
            } catch (error) {
                console.error('Error fetching location details:', error);
            }
        },

        async fetchAllLocations() {
            try {
                const response = await LocationListService({ page: 1, size: 10 });
                this.allLocations = response.data.list;
                this.getRecommendedLocations();
                console.log('All Locations:', this.allLocations);
            } catch (error) {
                console.error('Error fetching all locations:', error);
            }
        },

        getRecommendedLocations() {
            const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number);
            this.recommendedLocations = sortedLocations.slice(0, 4);
        },
    },
};
</script>

<style scoped>
.container {
    width: 70%; /* 界面宽度占据70% */
    margin: 0 auto; /* 居中显示 */
}

.breadcrumb {
    margin-bottom: 20px; /* 左上角面包屑导航的底部间距 */
}

.main-card {
    padding: 20px; /* 卡片内边距 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border-radius: 8px; /* 边缘圆角 */
}

.content {
    display: flex;
    justify-content: space-between;
}

.location-detail {
    flex: 1; /* 主体内容区域 */
    margin-right: 20px; /* 主体内容区域与推荐卡片之间的间距 */
}

.image-card {
    margin-bottom: 20px; /* 位置图片的底部间距 */
}

.location-image {
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 高度自适应 */
}

.location-info {
    margin-top: 10px;
    margin-bottom: 20px; /* 位置信息区域的上下间距 */
}

.location-description {
    margin-top: 20px; /* 详细信息区域的顶部间距 */
}

.recommendations {
    width: 300px; /* 推荐区域宽度 */
}

.recommendation-list {
    display: flex;
    flex-direction: column; /* 纵向排列推荐卡片 */
}

.recommendation-item {
    margin-bottom: 20px; /* 推荐项目之间的底部间距 */
}

.recommended-card {
    display: flex; /* 水平排列卡片内容 */
    align-items: center; /* 垂直居中内容 */
    height: 100px; /* 推荐卡片固定高度 */
}

.recommendation-image {
    width: 100px; /* 推荐卡片图片固定宽度 */
    height: 100%; /* 高度与卡片保持一致 */
    object-fit: cover; /* 保持宽高比，裁剪多余部分 */
    margin-right: 10px; /* 图片与文字之间的间距 */
}

.recommendation-name {
    text-align: left; /* 推荐名称左对齐 */
    margin: 0; /* 去掉默认margin */
    line-height: 100px; /* 让文字垂直居中 */
}
</style>
